<template>
  <div>
    <a-drawer
        placement="right"
        :visible="visible"
        width="800"
        @close="visible=false"
        >
        <div slot="title">
            <div class="draw-title">{{title}}</div>
        </div>
        <div class="bom-model">
            <detail-list title="背板点胶机" :col="2">
                <detail-list-item term="所属产线">1000000000</detail-list-item>
                <detail-list-item term="所属工序">已取货</detail-list-item>
                <detail-list-item term="产线位置">3*21</detail-list-item>
                <detail-list-item term="上线时间">2020-05-30</detail-list-item>
                <detail-list-item term="负责人">2ii</detail-list-item>
                <detail-list-item term="当前状态">tt</detail-list-item>
            </detail-list>
        </div>
        <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="实时工作信息">
                <workInfo-view></workInfo-view>
            </a-tab-pane>
            <a-tab-pane key="2" tab="告警信息" force-render>
                <warningInfo-view></warningInfo-view>
            </a-tab-pane>
            <a-tab-pane key="3" tab="当前作业产品">
                <nowInfo-view></nowInfo-view>
            </a-tab-pane>
            <a-tab-pane key="4" tab="分析指标">
                <indicators-view></indicators-view>
            </a-tab-pane>
        </a-tabs>
    </a-drawer>
  </div>
</template>

<script>
import DetailList from '@/components/tool/DetailList'
const DetailListItem = DetailList.Item
import workInfoView from './workInfoView'
import warningInfoView from './warningInfoView'
import nowInfoView from './nowInfoView'
import indicatorsView from './indicatorsView'
import { getThingsById} from '@/services/monitoring'
export default {
    components:{
        DetailList,
        DetailListItem,
        indicatorsView,
        nowInfoView,
        warningInfoView,
        workInfoView,
    },
  data(){
      return{
          title:'查看设备',
          visible:false,
          equiInfo:{},
      }
  },
  methods:{
      open(params){
        this.visible = true
        this.getById(params.id)
      },
      async getById(id){
          await getThingsById(id).then(res=>{
            //   if(res.code === 0){}
             this.equiInfo = res.data || {}
          })
      },
      callback(){

      }
  }
}
</script>

<style lang="less" scoped>
.draw-title{
    padding-left:10px;
    border-left: 5px solid #0182FE;
}
.bom-model{
  background-color: #F8F9FF;
  padding:10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border:1px solid #F0F1F5;
}
</style>